<template>
  <div class="menu_wrap" style="z-index: 10">
    <div :class="centerTitle?'title t_center':'title'">
      <svg v-if="!centerTitle" @click="goback" class="back_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1853">
        <path
            d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536"
            p-id="1854"></path>
      </svg>
      <span class="title_text">{{ pageTitle }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userHeader',
  props: {
    pageTitle: {
      type: String,
      default: "二级页面"
    },
    centerTitle: {
      type: Boolean,
      default: false
    },
  },
  methods:{
    goback(){
      history.back()
    }
  }
}
</script>
<style lang="scss" scoped>
.menu_wrap {
  width: 100%;
  height: 3.34rem;
  background: $mColor;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  top: 0;

  .title {
    width:50%;
    height:100%;
    display: flex;
    align-items: center;
    .title_text {
      color: $wColor;
      font-size: $aText;
    }

    .back_icon {
      width: 1.54rem;
      fill: $wColor;
      margin-right: 0.51rem;
    }
  }
  .t_center{
    width:100%;
    text-align: center;
    .title_text{
      width:100%;
    }
  }
}

</style>
